import { Toast } from "vant"
import { ref, toRefs } from "vue"
//导入store
import { useUserStore } from "@/stores/users.js"

const store = useUserStore()
//导入Http
import { Http } from "../../../http/event.js"
//导入map
import { useMapStore } from "@/stores/mapStore"
const { mapState } = toRefs(useMapStore())
export const useAddEvent = () => {
  let service = { name: "traffic", layerId: 2 }
  var source = new ol.source.Vector({})
  var layer = new ol.layer.Vector({
    source,
    style: new ol.style.Style({
      image: new ol.style.Circle({
        radius: 10,
        /* 填充色 */
        fill: new ol.style.Fill({
          color: "rgba(255, 0, 0,.9)",
        }),
        /* 描边 */
        stroke: new ol.style.Stroke({
          color: "skyblue",
          width: 2,
        }),
      }),
    }),
  })

  //添加事件函数
  let draw = ref(null)
  function addEvent() {
    Toast.success("请点击事件位置")
    //激活画笔
    draw.value = createDraw({
      type: "Point",
      source,
      callback: handleDraw,
    })
    mapState.value.map.addLayer(layer)
    mapState.value.map.addInteraction(draw.value)
  }
  //画笔回调打开对话框

  //事件类型选择
  const typeResult = ref("")
  const showTypePicker = ref(false)
  const typecolumns = ["刮擦", "碰撞", "翻车", "碾压", "失火", "其他"]
  const ontypeConfirm = (value) => {
    typeResult.value = value
    showTypePicker.value = false
  }
  //严重程度选择
  const serverResult = ref("")
  const showServerPicker = ref(false)
  const servercolumns = ["轻微事故", "一般事故", "重大事故", "特大事故"]
  const onserverConfirm = (value) => {
    serverResult.value = value
    showServerPicker.value = false
  }
  //事发位置
  const eventPosition = ref("")
  //经纬度
  const lnglat = ref("")
  // 驾驶人姓名
  const diverName = ref("")
  // 车牌号
  const carNum = ref("")
  // 事故描述
  const message = ref("")
  //事件添加失败函数
  function onFailed() {
    Toast.fail("提交事件失败")
  }
  //事件添加成功的函数
  async function onSubmit(values) {
    console.log(values)
    switch (values.grade) {
      case "轻微事故":
        values.grade = 1
        break
      case "一般事故":
        values.grade = 2
        break
      case "重大事故":
        values.grade = 3
        break
      case "特大事故":
        values.grade = 4
        break
    }
    //发送请求添加数据
    let data = await Http.addEvent({
      user_id: store.user.id,
      type: values.type,
      description: values.description,
      grade: values.grade,
      address: values.address,
      car_number: values.car_number,
      lnglat: lnglat.value,
    })
    if (data.code == 200) {
      Toast.success("添加事件成功")
      dialogShow.value = false
      //向空间数据库添加点
      let { id, lnglat, car_number, grade, submit_time, type, address } =
        data.result
      let arr = lnglat.split(",")
      /* 将数组将里边的元素转成数字型 */
      arr = arr.map(Number)
      var attr = [
        { type: "string", key: "驾驶员", value: diverName.value },
        { type: "string", key: "事件编号", value: id },
        { type: "int", key: "处理状态", value: 0 },
        { type: "string", key: "事件类型", value: type },
        { type: "int", key: "事件等级", value: grade },
        { type: "string", key: "发生时间", value: submit_time },
        { type: "string", key: "发生地点", value: address },
        { type: "string", key: "车牌号", value: car_number },
      ]
      Point.addEvent({
        position: arr,
        attr,
        service,
        docName: mapState.value.docLayer,
      })
    } else {
      Toast.fail("添加事件失败")
    }
    source.clear()
    mapState.value.map.removeInteraction(draw.value)
  }
  // 遮罩层显隐
  const dialogShow = ref(false)
  function handleDraw(e) {
    lnglat.value = e.target.sketchCoords_.join(",")
    dialogShow.value = true
  }
  //取消加点
  function cancelAddEvent() {
    dialogShow.value = false
    source.clear()
    mapState.value.map.removeInteraction(draw.value)
  }
  return {
    addEvent,
    dialogShow,
    typeResult,
    showTypePicker,
    typecolumns,
    ontypeConfirm,
    serverResult,
    showServerPicker,
    servercolumns,
    onserverConfirm,
    eventPosition,
    lnglat,
    diverName,
    carNum,
    message,
    onFailed,
    onSubmit,
    cancelAddEvent,
  }
}
